<template>
  <transition name="fade">
    <div class="loading_img_wrap" @touchmove.stop="stop_slider" @touchstart="start_slider">
        <div class="orders_wrap" ref="scroll_wrap">
          <div>
            <div class="" @click="cancle_img">
              <img v-show="loading" @click.stop="cancle_img"  src="../assets/img/loading.gif" alt="">
              <img v-show="!loading" @click.stop="cancle_img" :src="url" alt="">
            </div>
          </div>
        </div>
    </div>
  </transition>
</template>

<script>
    import back from 'components/back'
    import {stop_slider} from 'assets/base/base'
    import {get_cookie} from 'assets/cookie/cookie'
    import {get_order_detial} from 'api/order'

    export default {
        name: "loading-img",
        props:['url'],
        data() {
            return {
              loading:true
            }
        },
        created() {
           let img= new Image()
            img.src=this.url
            img.onload=()=>{
             this.loading=false
          }
        },
        activated() {
        },
        computed: {},
        methods: {
            start_slider(e) {
                this.start = {
                    X: e.touches[0].pageX,
                    Y: e.touches[0].pageY
                }
            },
            stop_slider(e) {
                stop_slider(e, this.$refs.scroll_wrap, this.start)
            },
            cancle_img(){
              this.$emit('cancleImg')
           }
        },
        components: {
            back
        }
    }
</script>

<style scoped lang="scss">
    .loading_img_wrap {
        position: fixed;
        background: #fff;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 11;
    }
    .orders_wrap {
        height: 100%;
        overflow: auto;
        max-width: 768px;
        margin: 0 auto;
        -webkit-overflow-scrolling: touch;
        > div {
          height: 100%;
          display: table;
          width: 100%;
           >div{
             display: table-cell;
             vertical-align: middle;
             >img{
               max-width: 100%;
             }
             >img:first-child{
               width: 50px;
               height: 50px;
             }
           }
          >h1{
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 10;
          }
        }
    }
    .fade-enter-active /* .fade-leave-active below version 2.1.8 */
    {
      opacity: 0;
    }

    .fade-enter-to /* .fade-leave-active below version 2.1.8 */
    {
      opacity: 1;
      transition: all .5s;
    }
</style>
